<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="{:getVersionNumber('/static/css/comment.css') }" media="all">
    <link rel="stylesheet" href="{:getVersionNumber('/static/css/iconfont.css')}" media="all">
</head>
<body>
文件上传框<br>
<input type="file" id="file"><br>
上传成功后的返回内容<br>
<div id="callback"></div>
<div class="mask"></div>
</body>
<script src="/static/js/jquery-3.4.1.min.js"></script>
<script src="{:getVersionNumber('/static/js/comment.js')}"></script>
<script>
    //首先监听input框的变动，选中一个新的文件会触发change事件
    document.querySelector("#file").addEventListener("change",function () {
        var file = document.querySelector("#file").files[0],  //获取到选中的文件
            formData = new FormData();  //创建formData对象
        formData.append("file",file);
        $.ajax({
            url: '/imgUpload',
            type: 'POST',
            cache: false,    //上传文件不需要缓存
            data: formData,
            processData: false, // 告诉jQuery不要去处理发送的数据
            contentType: false, // 告诉jQuery不要去设置Content-Type请求头
            success: function (res) {
                if(res.code == 0){
                    tipSave('suc', '上传成功');
                    let div = $('#callback'),
                        html = '<img src="'+ res.data.src +'" style="width: 50%;height: 50%">';
                    div.width(500);
                    div.height(300);
                    div.html(html);
                }else{
                    tipSave('fail', res.msg);
                }
            },
            error: function (err) {
                console.log(err)
            }
        })
    });
</script>
</html>